<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
		<title>疫情地图数据管理首页</title>
		<link rel="stylesheet" type="text/css" href="main.css">
		<script src="jquery-1.11.3.js"></script>  <!-- jqeury框架 -->
		<script src="echarts.js"></script>        <!-- echarts框架 -->
		<script src="china.js"></script>          <!-- 中国地图js文件 -->
		<script src="charts.js"></script>         
		<script src="main.js"></script>
	</head>
	<body>
		<!-- 网页头部 -->
		<header id="header">
			<div class="header_bar">
				<span class="img"><img src="picture02/logo.png" ></span>
				<span class="text">疫情地图数据管理中心</span>
				<ul class="right">
					<li><img src="picture02/wenhao.svg"></li>
					<li><img src="picture02/email.svg"></li>
					<li><img src="picture02/tixing.svg"></li>
					<li class="set_img"><img src="picture02/set.svg"></li>
					<li><img class="self_photo"/></li>
				</ul>
				<ul class="set">
					<li>账号设置</li>
					<li>消息设置</li>
					<li>帮助中心</li>
					<li class="logout">退出登录</li>
				</ul>
			</div>
		</header>
		<!-- 网页主体 -->
		<section id="section">
			<!-- 网页侧栏 -->
			<div class="left">
				<div class="info">
					<div class="photo">
						<img/>
					</div>
					<span class="limit">
					<span class="leftAdminName"></span>，您好<br>
					您的权限为：<span class="adminId"></span>
					</span>
				</div>
				<ul class="side_bar">
					<li class="analysis color"><span class="span1"></span>首页分析</li>
					<li class="userControl"><span class="span2"></span>用户管理</li>
					<li class="userMes"><span class="span3"></span>用户详情</li>
					<li class="admitControl"><span class="span4"></span>权限管理</li>
					<li><span class="span5"></span>帮助中心</li>
					<li class="contactUS"><span class="span6"></span>联系我们</li>
				</ul>
				<div class="time">
					<p class="label">时间 (GMT+0800)</p>
					<p class="year"></p>
					<p class="hours"></p>
				</div>
			</div>
			
			<!-- 网页中心 -->
			<div class="center">
				<div class="title">
					<span class="title_left">用户数据分析表</span>
					<span class="title_right">数据分析/轨迹记录</span>
				</div>
				<ul class="total">
					<li class="user_total">用户总量<br><span></span></li>
					<li class="green_total">绿码数量<br><span></span></li>
					<li class="yellow_total">黄码数量<br><span></span></li>
					<li class="red_total">红码数量<br><span></span></li>
				</ul>
				<!-- 位置地图 -->
				<div class="track">
					<div class="track_title">
						<img src="picture02/location.svg" />
						<span class="chinese">用户所在位置定位图</span><br>
						<span class="english">We collected the location distribution information of all the users.</span>
					</div>
					<div class="track_center" id="track_center"></div>  <!-- 这里放置地图图表 -->
						<script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=U9jfxkApEGwO6MdKoBZKIlG3kN12mrhP"></script>
				    <script type="text/javascript">
				    	// 百度地图API功能
				    	var map = new BMap.Map("track_center");    // 创建Map实例
				    	map.centerAndZoom(new BMap.Point(121.635, 29.835), 11);  // 初始化地图,设置中心点坐标和地图级别
				    	//添加地图类型控件
				    	map.addControl(new BMap.MapTypeControl({
				    		mapTypes:[
				                BMAP_NORMAL_MAP,
				                BMAP_HYBRID_MAP
				            ]}));	  
				    	map.setCurrentCity("宁波");          // 设置地图显示的城市 此项是必须设置的
				    	map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
				    </script>
				</div>
				<!-- 健康码状况分布图 -->
				<div class="bar">
					<div class="bar_title">
						<img src="picture02/code.svg"/>
						<span class="chinese">用户健康码状态统计图</span><br>
						<span class="english">The status of qr codes owned by all users is summarized. 
						From this table, we can clearly identify the number of healthy users.</span>
					</div>
					<div class="bar_center"></div>   <!-- 放置柱状统计图 -->
					<div class="bar_footer">绿码/黄码/红码/数量统计与查询</div>
				</div>
				<!-- 其他地区疫情状况图 -->
				<div class="line">
					<div class="line_title">
						<img src="picture02/tendency.svg"/>
						<span class="chinese">其他地区疫情状况图</span><br>
						<span class="english">We will pay attention to the epidemic situation in other regions 
						and make our own contribution to the fight against the epidemic.</span>
					</div>
					<div class="line_center"></div>   <!-- 放置折线统计图 -->
					<div class="line_footer">中国疫情/美国疫情/世界疫情状况查询</div>
				</div>
			
			<!-- 用户列表信息部分 -->
		<div class="info_box">
			<span class="user_list">用户列表共(<i></i>)个</span>
			<button class="addUser">添加用户</button>
      <div class="table_box">
			<table>
				<thead>
				<tr>
					<th>编号</th>
					<th>姓名</th>
					<th>性别</th>
					<th>年龄</th> 
					<th>职业</th>
					<th style="width: 200px;">身份证</th>
					<th style="width: 150px;">手机号</th>
					<th style="width: 410px;">省/市</th>
					<th style="width: 100px;">健康码</th>
					<th>操作1</th>
					<th>操作2</th>
					<th style="display: none;"></th>
				</tr>
				</thead>
				<tbody>
					<!-- 已被动态添加 -->
				</tbody>
			</table>
			<button class="pageLeft"></button>
			<span class="currentPage">1</span>
			<span class="line">/</span>
			<span class="totalPage"></span>
			<button class="pageRight"></button>
			<input class="searchPage" type="search"/>
			<button class="pageGo">跳转</button>
			</div>
		</div>
		
		<!-- 用户填报健康信息部分 -->
		<div class="inputed_info">
			<div class="infoBox">
				<p>用户填报健康数据信息</p>
				<div class="user_photo"><img src="picture02/user_photo.jpg"/></div>
					<span class="Name">姓名：</span>
					<span class="Sex">性别：</span>
					<span class="Age">年龄：</span>
					<span class="userName">小王小王</span>
					<span class="userSex">男</span>
					<span class="userAge">20</span>
					<input class="msgSearch" type="search" placeholder="请输入被搜索人用户名"/>
					<button class="userHearSearch">搜索</button>
					<table>
						<tr>
							<td>1、14日内否到过湖北或其他新冠肺炎疫情严重的区域?</td>
							<td class="message1">否</td>
						</tr>
						<tr>
							<td>2、14日内否接触过湖北或其他新冠肺炎疫情严重的区域?</td>
							<td class="message2">否</td>
						</tr>
						<tr>
							<td>3、14日内家人或同住者是否有出现发热、干咳等症状?</td>
							<td class="message3">否</td>
						</tr>
						<tr>
							<td>4、14日内否接触过疫情病人或者周边有2人以上发热人员?</td>
							<td class="message4">否</td>
						</tr>
						<tr>
							<td>5、14日内否离开过所在地?</td>
							<td class="message5">否</td>
						</tr>
						<tr>
							<td>6、您是否处于隔离中，或确诊出院未满14天?</td>
							<td class="message6">否</td>
						</tr>
				    <tr>
				     <td>7、您是否有发热、气促、呼吸道症状?</td>
						 <td class="message7">否</td>
				    </tr>
						<tr>
						 <td>8、当前你的健康状况是否有异常?</td>
						 <td class="message8">否</td>
						</tr>
					</table>
			</div>
		</div>
		
		<!-- 管理员权限设置页面 -->
		<div class="limits_control">
			<div class="limitsBox">
				<p>管理员权限设置</p>
				<!-- 此处已被动态添加 -->
				<button class="pageLeft"></button>
				<span class="currentPage">1</span>
				<span class="line">/</span>
				<span class="totalPage"></span>
				<button class="pageRight"></button>
				<input class="searchPage" type="search"/>
				<button class="pageGo">跳转</button>
		</div>
	</div>  
 </div>
</section>
		
		<!-- 页面底部 -->
		<footer id="footer">
			<div class="footerTop">
				<ul class="title">
					<li>合作伙伴</li>
					<li>技术支持</li>
					<li>联系方式</li>
				</ul>
				<ul class="partner">
					<li>"我太难了"项目组</li>
					<li>@我要怒放的生命</li>
					<li>@&</li>
					<li>@未名</li>
				</ul>
				<ul class="technology">
					<li>移动终端</li>
					<li>web客户端</li>
					<li>服务器技术</li>
					<li>数据库管理</li>
				</ul>
				<ul class="tel">
					<li>wechat:!DOCTYPE html</li>
					<li>tel:666666</li>
					<li>邮箱:biubiubiu@66.com</li>
					<li>地址:浙江省宁波市</li>
				</ul>
			</div>
			<div class="footerBottom">
				Copyright © CMX "我太难了"项目组 | 浙ICP备5201314520号 | 疫情管理中心经营许可证： L-YC-BK12345 
			</div>
		</footer>
	</body>
</html>
